import React, { useRef, useState } from 'react';
import { connect } from 'react-redux';
import { ImageUploader, Button, Dialog, Input } from 'antd-mobile';
import { RightOutline, SetOutline, SmileOutline } from 'antd-mobile-icons';
import { updateAvatar, userUpdate } from './../../service/api'
import NavBarAgain from "./../../components/NavBarAgain";
import action from '../../store/actions';
import defaultAvatar from './../../assets/favicon.png'
import './index.less';

const Personal = (props) => {
    const { userInfo, navigate, setUserInfo } = props;
    let [visible, setVisible] = useState(false);
    let [username, setUsername] = useState(() => {
        return userInfo?.name;
    });

    /* 更新头像 */
    const handleUpdateAvatar = async () => {

    }

    /* 更新用户名 */
    const setUpdateUserName = async () => {
        try {
            let { code, data } = await userUpdate(username);
            if (code === 0) {
                data.pic  = userInfo.pic;
                //更新用户信息
                setUserInfo(data);
            }
        } catch (error) {
            console.log('修改用户信息失败 ...', error);
        }
    }

    return <div className='personal-page'>
        <NavBarAgain />
        <div className='avatar-view'>
            <img src={userInfo?.pic || defaultAvatar} alt="" onClick={handleUpdateAvatar} />
            <p onClick={() => setVisible(true)}>{userInfo?.name}</p>
        </div>

        <div className='action-view'>
            <div className='item-list' onClick={() => {
                navigate('/store')
            }}>
                <p>我的收藏</p>
                <RightOutline />
            </div>
            <div className='item-list'>
                <p>消息中心</p>
                <RightOutline />
            </div>
        </div>

        <div className='footer-view'>
            <p>
                <SmileOutline />
                <span>夜间模式</span>
            </p>
            <p onClick={() => {
                navigate('/updateInfo');
            }}>
                <SetOutline />
                <span>设置</span>
            </p>
        </div>


        {/* 弹框区域 */}
        <Dialog
            visible={visible}
            title='修改用户名'
            closeOnAction
            onClose={() => {
                setVisible(false)
            }}
            actions={[[
                {
                    key: 'confirm',
                    text: '确定',
                    onClick: setUpdateUserName
                },
                {
                    key: 'cancel',
                    text: '取消',
                },
            ]]}

            content={
                <Input placeholder='输入用户名进行修改' clearable value={username} onChange={val => setUsername(val)} />
            }
        >


        </Dialog>
    </div>
}

export default connect(state => state.baseReducer, action.baseAction)(Personal);